<uieip type="page" value="login" debug="true" timeout="5000"></uieip>
<uieip type="reg" value="console"></uieip>
<!DOCTYPE html>
<html>

<head>
    <uieip type="file" value="inc" src="/yqwin/easyui/include.txt" cache="true" minute="1440"></uieip>
    <uieip type="file" value="css" src="/yqwin/css/yqwin.min" cache="false"></uieip>
    <uieip type="file" value="js" src="/yqwin/src/yqwin.min" cache="false"></uieip>
    <script type="text/javascript" src="/scripts/mammoth.browser.min.js"></script>
    <title>HtmlEdit</title>
</head>

<body style="margin: 0;">
    <div style="padding:5px 5px 0 5px;">
        <h1>HtmlEdit uitype=19</h1>
        <input id="txt_html" style="width:300px;">
        <p></p>
        <a href="#" class="easyui-linkbutton" data-options="" onclick="javascript:html_markdown()">html=>markdown</a>
        <a href="#" class="easyui-linkbutton" data-options="" onclick="javascript:getData()">getData</a>
        <a href="#" class="easyui-linkbutton" data-options="" onclick="javascript:setData()">setData</a>
        <a href="#" class="easyui-linkbutton" data-options="" onclick="javascript:disable()">disable</a>
        <a href="#" class="easyui-linkbutton" data-options="" onclick="javascript:enable()">enable</a>
        <a href="#" class="easyui-linkbutton" data-options="" onclick="javascript:destroy()">destroy</a>
        <a href="#" class="easyui-linkbutton" data-options="" onclick="javascript:reset()">reset</a>
        <input id="txt_width" value="800">

        <a href="#" class="easyui-linkbutton" data-options="" onclick="javascript:word_html()">word=>html</a>
        <p></p>
        <div id="mytextarea" style="width: 100%;height:300px;"></div>
        <a href="#" class="easyui-linkbutton" data-options="" onclick="javascript:getData2()">getData</a>
        <a href="#" class="easyui-linkbutton" data-options="" onclick="javascript:setData2()">setData</a>
        <a href="#" class="easyui-linkbutton" data-options="" onclick="javascript:disable2()">disable</a>
        <a href="#" class="easyui-linkbutton" data-options="" onclick="javascript:enable2()">enable</a>
        <a href="#" class="easyui-linkbutton" data-options="" onclick="javascript:destroy2()">destroy</a>
        <a href="#" class="easyui-linkbutton" data-options="" onclick="javascript:reset2()">reset</a>
        <input id="txt_width2" value="800">
        <input id="txt_height2" value="400">
        <p></p>
        <textarea id="mymarkdown" style="width: 100%;height:300px;"></textarea>
        <h2>DataGrid</h2>
        <form>
            <table style="width: 100%;">
                <tr>
                    <td style="width:350px;vertical-align: top;">
                        <div class="easyui-panel" title="editMode" style="width:100%;max-width:370px;padding: 5px;">
                            <div id="div_editMode"></div>
                        </div>
                    </td>
                    <td style="width:260px;vertical-align: top;">
                        <div class="easyui-panel" title="editType" style="width:100%;max-width:370px;padding: 5px;">
                            <div id="div_editType"></div>
                        </div>
                    </td>
                    <td style="width:100px;vertical-align: top;">
                        <div class="easyui-panel" title="editModeNo" style="width:100%;max-width:370px;padding: 5px;">
                            <div id="div_editModeNo"></div>
                        </div>
                    </td>
                    <td style="vertical-align: top;">
                    </td>
                </tr>
            </table>
        </form>
        <a href="#" class="easyui-linkbutton" data-options="" onclick="javascript:reset3()">reset</a>
        <p></p>
        <table id="dg" style="width:80%;height:350px;"></table>
    </div>
    <script src="/scripts/turndown.js">

    </script>
    <script>
        function html_markdown() {
            let down = new TurndownService();
            //down.keep(['del', 'ins']);   //保留，不处理
            let md = down.turndown('<p>Hello <del>world</del><ins>World</ins></p>');
            let blob = new Blob([md], {
                type: 'text/markdown'
            });
            let url = URL.createObjectURL(blob);
            let a = document.createElement('a');
            a.href = url;
            a.download = 'markdown.md';
            a.click();
            URL.revokeObjectURL(url);
        }

        var dbname = "yqbase";

        $(function () {
            //----------------------------------
            $("#txt_html").yqTextRichEdit({
                editType: 2,
                data: { code: "asdasdasdasdasd" }
            });

            $("#txt_width").numberspinner({
                width: 130,
                min: 100,
                max: 1000,
                value: 200,
                label: "w",
                labelWidth: 20,
                buttonText: "resize",
                onClickButton: function () {
                    $("#txt_html").yqTextRichEdit("resize", $("#txt_width").numberspinner("getValue"));
                },
            })

            $('#mytextarea').yqHtmlEdit({});

            $('#mymarkdown').yqCodeEdit({
                type: "md"
            });
            //----------------------------------

            //----------------------------------
            $("#txt_width2").numberspinner({
                width: 90,
                min: 100,
                max: 1000,
                label: "w",
                labelWidth: 18,
            })

            $("#txt_height2").numberspinner({
                width: 130,
                min: 100,
                max: 1000,
                label: "h",
                labelWidth: 15,
                buttonText: "resize",
                onClickButton: function () {
                    $("#mytextarea").yqHtmlEdit("resize",
                        {
                            width: $("#txt_width2").numberspinner("getValue"),
                            height: $("#txt_height2").numberspinner("getValue")
                        });
                },
            })
            //----------------------------------

            $("#div_editMode").radiogroup({
                name: 'radio1',
                labelWidth: 340,
                data: [{
                    value: '1',
                    label: '自由编辑1（包含save按钮）,在当前行中编辑',
                }, {
                    value: '2',
                    label: '自由编辑2（包含save按钮），弹出编辑模态窗体'
                }, {
                    value: '3',
                    label: '编辑（不包含save按钮），弹出编辑模态窗体'
                }],
                value: 3,
                dir: 'v'
            });

            $("#div_editType").radiogroup({
                name: 'radio2',
                labelWidth: 270,
                data: [{
                    value: '1',
                    label: '属性编辑模式 editMode=2,3使用',
                }, {
                    value: '2',
                    label: 'form编辑模式 editMode=2,3使用'
                }],
                value: 1,
                dir: 'v'
            });

            $("#div_editModeNo").radiogroup({
                name: 'radio3',
                labelWidth: 70,
                data: [{
                    value: '1',
                    label: '=1',
                }, {
                    value: '2',
                    label: '=2'
                }, {
                    value: '3',
                    label: '=3'
                }],
                value: 1,
                dir: 'v'
            });


            $.yqDbList({ ajaxUrl: "_db.html" },
                function (data) {
                    if (data.error == 0) {
                        dbname = data.rows[0].name;
                        dg();
                    } else {
                        alert(data.info);
                    }
                });
        });

        var tData;
        function getData() {
            tData = $("#txt_html").yqTextRichEdit("getData");
            console.log(tData);
        }
        function setData() {
            $("#txt_html").yqTextRichEdit("setData",
                {
                    files: [],
                    html: "12321321321312312323"
                }
            );
        }
        function disable() {
            $("#txt_html").yqTextRichEdit("isEdit", false);
        }
        function enable() {
            $("#txt_html").yqTextRichEdit("isEdit", true);
        }
        function destroy() {
            $("#txt_html").yqTextRichEdit("destroy");
            console.log(tData);
        }
        function reset() {
            $("#txt_html").yqTextRichEdit({
                data: { files: [], html: "hello word!" },
            });
            console.log(tData);
        }

        function word_html() {
          // 创建文件输入元素
            const fileInput = document.createElement('input');
            fileInput.type = 'file';
            fileInput.accept = '.doc, .docx';
            fileInput.id = 'dynamicWordFile';

            fileInput.addEventListener('change', async (e) => {
                const file = e.target.files[0];
                if (!file) return;

                try {
                    const arrayBuffer = await file.arrayBuffer();
                    const { value: html } = await mammoth.convertToHtml({ arrayBuffer });
                     
                    console.log(html);
                    
                
                } catch (error) {
                    console.error('转换失败:', error);
                }finally{
                    fileInput.remove();
                }
            });
            fileInput.click();
        }

        var tData2;
        function getData2() {
            tData2 = $("#mytextarea").yqHtmlEdit("getData");
            console.log(tData2);
        }
        function setData2() {
            $("#mytextarea").yqHtmlEdit("setData",
                {
                    files: [],
                    html: "12321321321312312323"
                }
            );
        }
        function disable2() {
            $("#mytextarea").yqHtmlEdit("disable");
        }
        function enable2() {
            $("#mytextarea").yqHtmlEdit("enable");
        }
        function destroy2() {
            $("#mytextarea").yqHtmlEdit("destroy");
            console.log(tData2);
        }
        function reset2() {
            $('#mytextarea').yqHtmlEdit({
                data: { files: [], html: "hello word!" },
            });
            console.log(tData2);
        }

        function dg() {
            $("#dg").yqDataGrid({
                ajaxUrl: "/_db.html",
                dbname: "yqbase",
                tbname: "ab_test_html",
                keyId: "sid",
                bindingKeyId: null,
                bindingValue: null,
                pKeyId: null,
                pKeyValue: null,

                addWhere: "",
                order: "createtime desc",

                frozenNum: 2,
                editMode: 3,
                editType: 1,
                editModeW: 650,
                editModeH: 450,
                editModeNo: 1,
                loadData: true,
                isPage: true,

                isEdit: true,
                copy: false,
                add: true,
                upp: true,
                del: true,
                isdel: false, //可注销
                isdelEdit: false, //注销是否可编辑
                move: false, //可移动

                beforeBindingTitle: function (columns, callback) {
                    callback(columns);
                }, //标题绑定前
                afterBindingTitle: function () {

                }, //标题绑定后
            });
        }

        function reset3() {
            $("#dg").yqDataGrid({
                editMode: $("#div_editMode").radiogroup("getValue"),
                editType: $("#div_editType").radiogroup("getValue"),
                editModeNo: $("#div_editModeNo").radiogroup("getValue")
            });
        }

    </script>
</body>

</html>